<template>
  <div class="body">
    <el-text style="font-size:30px;letter-spacing:3px">尊贵的用户{{user_name}}，现在正在进行的是{{count_name}}评测项目</el-text>
    <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :show-file-list="false"
      :before-upload="beforeUpload"
    >
      <!-- <el-button style="width: 800px;" >点击上传视频</el-button> -->
    </el-upload>
      <input type="file" @change="handleFileChange" accept="video/*">
    <video style="width: 800px;height: 400px;" :src="videoUrl" controls></video>
  </div>
  <div class="right">
      <el-button style="width: 300px;height: 40px;" type="primary"  >上一个</el-button>
      <el-button style="width: 300px;height: 40px; margin-top:120px ;" type="primary" >下一个</el-button>
    </div>
    <div class="foot">
      <el-button style="width: 300px;height: 40px;" type="primary"  >开始评定</el-button>
      <el-button style="width: 300px;height: 40px;margin-left: 100px;" type="primary" >结束评定</el-button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElUpload, ElButton,ElMessage } from 'element-plus';

const user_name=ref('')
const count_name=ref('')
const uploadUrl = 'upload_url';
// const videoUrl = ref<string>('https://example.com/your-video.mp4');
const videoUrl=ref()
const beforeUpload = (file: File) => {
  const isVideo = file.type.startsWith('video/');
  if (!isVideo) {
    ElMessage.error('请上传视频文件');
  }
  const isLt100M = file.size / 1024 / 1024 < 1024;
  if (!isLt100M) {
    ElMessage.error('上传视频大小不能超过 100MB');
  }
  return isVideo && isLt100M;
};
const handleFileChange=(event)=> {
  console.log(100)
      const file = event.target.files[0];
      if (!file) return;

      if (file.type.startsWith('video/')) {
        const reader = new FileReader();
        reader.onload = (e) => {
          videoUrl.value = e.target.result;
        };
        reader.readAsDataURL(file);
      } else {
        alert('请上传视频文件');
      }
    }

const handleSuccess = (response: { code: number; data: { url: string }; msg: string }) => {
  if (response.code === 200) {
    videoUrl.value = response.data.url;
  } else {
    ElMessage.error(response.msg);
  }
};
</script>

<style lang="scss" scoped>
.foot{
  position: absolute;
  bottom: 12%;
  left: 24%;
}
.right{
  position: absolute;
  right: 100px;
  top: 38%;
  display: flex;
  flex-direction: column;
    align-items: baseline;
}
.body{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-60%,-60%);
  font-family:'Arial Normal' ;
}
</style>